// import { post, deleter, ResponseCode } from '@/api/http'
import { CResponse, request, ResponseCode } from '@/api/request'
import { Message, Modal } from '@arco-design/web-vue'
import {
  usePagination,
  useRowKey,
  useRowSelection,
  useTable,
  useTableColumn,
  useTableHeight,
} from '@/hooks/table'
import { numberFormat, PERCENT, CURRENCY } from '@/utils/format'

import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

import { CUSTOMER_LIST, CUSTOMER_DELETE } from '@/api/customer'
import type { Customer, CustomerSearchOptions } from '@/api/customer/type'

const table = useTable()

const columns: TableColumnData[] = [
  {
    title: '客户经理',
    dataIndex: 'accountManager',
  },
  {
    title: '已经垫付金额',
    dataIndex: 'amountAlreadyAdvanced',
    render: ({ record }) => numberFormat(CURRENCY).format(record.amountAlreadyAdvanced)
  },
  {
    title: '客户可用金额',
    dataIndex: 'customerAvailableAmount',
    render: ({ record }) => numberFormat(CURRENCY).format(record.customerAvailableAmount)
  },
  {
    title: '客户名称',
    dataIndex: 'customerName',
  },
  {
    title: '客户ID',
    dataIndex: 'customerId',
  },
  {
    title: '客户抖音ID',
    dataIndex: 'customerTiktokId',
  },
  {
    title: '客户政策点位',
    dataIndex: 'policyPoints',
    render: ({ record }) => numberFormat(PERCENT).format(record.policyPoints),
  },
  {
    title: '备注',
    dataIndex: 'remarks',
  },
  {
    title: '抖音可用金额',
    dataIndex: 'tiktokAvailableAmount',
    render: ({ record }) => numberFormat(CURRENCY).format(record.tiktokAvailableAmount)
  },
  {
    title: '操作',
    slotName: 'actions',
  },
]

export const useCustom = () => {

  const pagination = usePagination(doRefresh)
  const tableColumns = useTableColumn(columns)
  const tableFooterRef = ref()
  const visible = ref(false)
  const selectCustom = ref<Customer>()
  const searchOptions = ref<CustomerSearchOptions>({})

  async function doRefresh() {
    const res = await request.Post<CResponse>(CUSTOMER_LIST, searchOptions.value).then((res) => res.json())

    table.handleSuccess(res)
  }

  const onSearch = async () => {
    pagination.page = 1
    await doRefresh()
  }

  const onResetSearch = async () => {
    searchOptions.value = {}
    pagination.page = 1
    await doRefresh()
  }

  function addItem() {
    visible.value = !visible.value
  }

  const editItem = async (item: Customer) => {
    selectCustom.value = item
    visible.value = true
  }

  const deleteItem = async (item: Customer) => {
    Modal.confirm({
      title: '提示',
      content: '确定要删除此数据吗？',
      cancelText: '取消',
      okText: '删除',
      onOk: async () => {
        const { code } = await request.Delete<CResponse>(CUSTOMER_DELETE + item.id, {
          id: item.id,
        }).then(res => res.json())
        if (code === ResponseCode.SUCCESS) {
          Message.success('数据删除成功')
          table.dataList.splice(table.dataList.indexOf(item), 1)
        }
      },
    })
  }

  onMounted(doRefresh)

  return {
    table,
    visible,
    selectCustom,
    searchOptions,

    addItem,
    editItem,
    deleteItem,

    onSearch,
    doRefresh,
    onResetSearch,

    pagination,
    tableColumns,
    tableFooterRef,
  }
}
